<template>
  <div class="pa-5" >
    <v-card elevation="1">
      <br/>
      <h1>大大的活动窗口</h1>
      <br/>
    </v-card>
    <br/>
    <v-card elevation="1">
      <v-card-title>简单分类</v-card-title>
      <v-card-text>
        <v-row class="text-center">
         <v-col cols="3" v-for="businessCategory of businessCategoryList" :key="businessCategory.id">
           <div><v-icon>{{businessCategory.icon}}</v-icon></div>
           <div>{{businessCategory.category}}</div>
         </v-col>
          <v-col cols="3">
            <div><v-icon>mdi-all-inclusive</v-icon></div>
            <div>占位</div>
          </v-col>
          <v-col cols="3">
            <div>😃</div>
            <div>微笑</div>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
    <br/>
    <v-card v-for="business in businessList"
            :key="business.id"
            class="mb-3 pa-2"
            @click="openBusinessPage(business.id)">
      <v-row no-gutters>
        <v-col cols="4">
          <div>
            <v-img alt="店铺图片" :src="business.image" height="70px" width="70px"/>
          </div>
        </v-col>
        <v-col>
          <div>
            <div>{{business.name}}</div>
            <v-icon color="orange" small>mdi-star-half-full</v-icon><span style="color: orange;font-size: small">4.5</span>
            <div style="font-size: small">月销售:{{business.monthlySales}}</div>
          </div>
        </v-col>
      </v-row>
    </v-card>
    <v-btn block @click="getBusinessByPage(true)">点击加载更多</v-btn>
  </div>
</template>

<script>
import {selectAllBusinessCategory, selectBusinessByPage} from "@/http/api/business";
import businessPage from "@/views/home/BusinessPage";

export default {
  name: "Index",
  data:()=>({
    businessList:[],
    businessCategoryList:[],
    pageNum:1,
    pageSize:8,
    nextPage:1,
  }),
  created() {
    this.init()
  },
  methods:{
    init(){
      selectAllBusinessCategory().then(res=>{
        this.businessCategoryList = res.data
      })
      this.getBusinessByPage()
    },
    getBusinessByPage(isAdd){
      if (isAdd){
        if (this.nextPage === 0){
          this.$breadstick.notify("暂无更多的商家!!")
          return
        }
        this.pageNum++;
      }
      selectBusinessByPage(this.pageNum,this.pageSize).then(res=>{
        this.businessList.push(...res.data.list)
        this.nextPage = res.data.nextPage
      })
    },
    openBusinessPage(id){
      this.$router.push({
        path:'businessPage',
        query:{
          id
        }
      })
    }
  }
}
</script>

<style scoped>

</style>